<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="addUserModal">
    <template id="addUserModal">
        <div>
            <el-dialog  width="25%" title="添加" :visible.sync='show_add_user_modal' :show-close="false" size="mini" center :close-on-click-modal="false" :close-on-press-escape="false">
                <el-form :model="formData" ref="formData" :rules="rulesFormData" label-width="80px" class="demo-ruleForm" size="mini">
                    <el-form-item label="手机号:" prop="mobile">
                        <el-input  maxlength="11" type="text" v-model.number="formData.mobile" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名:" prop="name">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="cancelDialogHandle">取 消</el-button>
                    <el-button size="mini" @click="confirmDialogHandle" type="primary" >确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </template>
    <script>
        const AddUserModal = {
            props: {
                show_add_user_modal: Boolean
            },
            template: '#addUserModal',
            data(){
                return {
                    formData: {
                        mobile: '',
                        name: '',
                    },
                    rulesFormData : {
                        mobile: [
                            { required: true, message: '手机号不能为空'},
                            { type: 'number', message: '必须为11位数字', trigger: 'blur'}
                        ],
                        name: [{ required: true, message: '姓名不能为空'}]
                    }
                }
            },
            methods:{
                cancelDialogHandle: function (){
                    this.$emit('add_modal_close');
                },
                confirmDialogHandle: function () {
                    const mobile = this.formData.mobile.toString();
                    if(mobile.length != 11){
                        this.$message({ showClose: true, message: '手机号应为11位', type: 'error'});
                        return ;
                    }
                    axios.post(
                        "/system/user/addUser",
                        JSON.stringify(this.formData),
                        {headers: {'Content-Type': 'application/json'}}
                    ).then(response => {
                        const data = response.data;
                        const code = data.code;
                        if(code=="0000"){
                            this.$message({ showClose: true, message: "添加成功！", type: 'success'});
                        }else{
                            this.$message({ showClose: true, message: "添加失败，" + data.info, type: 'error'});
                            return ;
                        }
                    }).catch(error => {
                        this.$message({ showClose: true, message: "添加失败，" + error.message, type: 'error'})
                    })
                    this.cancelDialogHandle();
                },
            },
        }
    </script>
    <style scoped>
        .el-dialog--center .el-dialog__body {
            padding: 20px 30px 20px;
        }
    </style>
</div>
</html>